<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>${article.title} - ${category.name}</title>
		<script src="${ctxStatic}/IDH/js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/reset.min.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/help/help.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/bootstrap=v3.3.0/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/iconfont/iconfont.css">
		<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="${ctxStatic}/bootstrap=v3.3.0/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.menu_activ a {
			background: #ccc !important;
    		color: #fff !important;
		}
		.help-doc a{
			background: #2a9fb7 !important;
    		color: #fff !important;
		}
		.btn {
			background: #fff !important;
    		border-color: #279cb4 !important;
    		/* margin: 10px 0; */
		}
	</style>
	<body>
		<%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%>
		<!--pc content start-->
		<section class="container content" id="container">
			<div class="col-md-12 margin-mobile-0">
				<div class="help">
					<div class="col-xs-12" >
						<div class="col-md-3 hidden-xs">
							<ul class="nav nav-tabs">
								<li class="help-doc">
								   <a href="javascript:void(0);">帮助文档</a>
								</li>
								<cms:frontCategoryList categoryList="${categoryList}"/>
							</ul>
						</div>
						<div id="volet_clos" class="visible-xs-block">
						  	<div id="volet">
							    <ul class="nav nav-tabs">
							    	<li class="help-doc">
									   <a href="javascript:void(0);">帮助文档</a>
									</li>
									<cms:frontCategoryList categoryList="${categoryList}"/>
								</ul>
								<div class="icon-show-hide beats">
									<a href="#volet" class="ouvrir" aria-hidden="true">
									   	<i style="font-family: 'Glyphicons Halflings' !important;" class="glyphicon glyphicon-chevron-right"></i>
									</a>
									<a href="#volet_clos" class="fermer" aria-hidden="true">
									   	<i style="font-family: 'Glyphicons Halflings' !important;" class="glyphicon glyphicon-chevron-left"></i>
									</a>
								</div>
							</div>
						</div>
						<div class="col-xs-12 col-md-7">
							<div class="tab-content">
								<div class="tab-pane active " id="help">
									<label>${article.category.name}</label>
									<div class="help-content">
										${article.articleData.content}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</section>

		<!--pc content end-->
	<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>

	</body>
	<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">  
		
		/*导航去高亮*/
		$('.hn_ul li').removeClass('tabLi');
		$('.p_ul li').removeClass('p_ul_li_active');

		function menuShow(){
			if($(".help .col-md-3").hasClass("show-menu")){
				$(".help .col-md-3").removeClass("show-menu");
				$(".help .col-md-3").addClass("hide-menu");
			}else{
				$(".help .col-md-3").removeClass("hide-menu");
				$(".help .col-md-3").addClass("show-menu");
			}
		}
		$('.container').bind('touchstart',function(e){
		    startX = e.originalEvent.changedTouches[0].pageX,
		    startY = e.originalEvent.changedTouches[0].pageY;
		});
		$('.container').bind('touchmove',function(e){
		    //获取滑动屏幕时的X,Y
		    endX = e.originalEvent.changedTouches[0].pageX,
		    endY = e.originalEvent.changedTouches[0].pageY;
		    //获取滑动距离
		    distanceX = endX-startX;
		    distanceY = endY-startY;
		    //判断滑动方向
		    if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
		        $('.ouvrir i').click()
		    }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
		        $('.fermer i').click()
		    }else{}
		
		});
		$(document).ready(function(){
			var headHeight = $(".phone_dom").height()+"px";
			$(".help .col-md-3").css("top",headHeight)

			});
    </script>
</html>